<template>
    <div class="home">
        <el-upload
                class="upload-demo"
                ref="upload"
                action=""
                :limit="limit"
                :http-request="submitUpload"
                :before-upload="beforeUpload"
                :on-exceed="onExceed"
                v-show="false">
            <el-button ref="xzwj">选取文件</el-button>
        </el-upload>
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="4" style="font-size: 25px;text-align: left">
                        <i class="el-icon-s-fold" @click="caidan()" ref="tb"></i>
                        <span>后台管理系统</span>
                    </el-col>
                    <el-col :span="1">
                        <el-link type="primary" href="javascript:" @click.native="zhuye" style="font-size: 20px">主页</el-link>
                    </el-col>
                    <el-col :span="1" :offset=16 style="font-size: 25px; text-align: right; margin-top: 5px">
                        <div class="block">
                            <el-avatar :size="50" :src="headPortrait"></el-avatar>
                        </div>
                    </el-col>
                    <el-col :span="2" style="text-align: left">
                        <el-dropdown>
                              <span class="el-dropdown-link" style="font-size: 17px">
                                {{nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
                              </span>
                            <el-dropdown-menu slot="dropdown">
                                <div @click="myMessage"><el-dropdown-item>我的消息</el-dropdown-item></div>
                                <div @click="myData"><el-dropdown-item>基本资料</el-dropdown-item></div>
                                <div @click="upPass"><el-dropdown-item>修改密码</el-dropdown-item></div>
                                <div @click="upheadPortrait"><el-dropdown-item>更换头像</el-dropdown-item></div>
                                <div @click="zhuxiao"><el-dropdown-item divided>注销账号</el-dropdown-item></div>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="auto">
                    <vue-scroll :ops="ops">
                        <el-radio-group v-model="isCollapse" v-show="false">
                            <el-radio-button :label="false" ref="zk">展开</el-radio-button>
                            <el-radio-button :label="true" ref="sq">收起</el-radio-button>
                        </el-radio-group>
                        <MenuTree :menuData="this.menuData" :isCollapse="this.isCollapse" @changeMenu="changeMenu"></MenuTree>
                    </vue-scroll>
                </el-aside>
                <el-container>
                    <el-main>
                        <vue-scroll :ops="ops">
                        <!--        返回图片以及标题-->
                        <el-row v-if="active" style="margin-top: 20px">
                            <el-col :span="1" style="margin-top: -20px;">
                                <a href="javascript:" @click="backClick">
                                    <img alt="" src="../assets/img/back.png">
                                </a>
                            </el-col>
                            <el-col :span="5" style="font-size: 18px; margin-top:-8px; text-align: left">
                                <span>{{subMenu===""?"心心念念":subMenu}}/ {{menuItem===""?"主页":menuItem}}</span>
                            </el-col>
                        </el-row>
                        <router-view/>
                        </vue-scroll>
                    </el-main>
                </el-container>
            </el-container>
            <el-container>
                <el-footer>
                    心心念念版权所有
                    COPYRIGHT © 2001 - 2021 TENCENT. ALL RIGHTS RESERVED.
                    COPYRIGHT © 2012 Riot Games,Inc. ALL RIGHTS RESERVED.
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import MenuTree from "../components/wyq/MenuTree";
    import Home from "../model/Home";

    const home=Home.getInstance();
    export default {
        data() {
            return {
                active:false,
                menuData: [],
                isCollapse: true,
                subMenu:"",//页眉1
                menuItem:"",//页眉2
                ops: {
                    vuescroll: {},
                    scrollPanel: {},
                    rail: {},
                    bar: {}
                },
                nickname:"",
                headPortrait:"",
                files:'',
                fileName:'',
                limit:2,
            };
        },
        components: {
            'MenuTree': MenuTree
        },
        created() {//创建之后
            this.changeMenu();
            home.list(this.$http,JSON.parse(localStorage["user"])[0].id).then(msg=>{
                this.menuData=msg.data.data.data;
                this.$loading().close()
            });
            const user=JSON.parse(localStorage["user"])[0];
            this.nickname=user.userRealname;
            if(sessionStorage.getItem("headPortrait")!=null){
                this.headPortrait=sessionStorage.getItem("headPortrait")
            }else{
                if(user.userPreDate==null){
                    this.headPortrait="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                }else{
                    this.headPortrait=user.userPreDate
                }
            }
        },
        methods:{
            changeMenu(){
                this.subMenu=sessionStorage.getItem("submenu");
                this.menuItem=sessionStorage.getItem("menuitem");
            },
            zhuye(){
                this.$router.push("/home/homePage")
            },
            backClick(){//回退按钮事件
                window.history.back();
            },
            caidan(){//菜单收起，展开
                const tb=this.$refs.tb.className;
                if(tb==="el-icon-s-unfold"){
                    this.$refs.tb.className="el-icon-s-fold";
                    this.$refs.sq.$el.click()
                }else{
                    this.$refs.tb.className="el-icon-s-unfold";
                    this.$refs.zk.$el.click()
                }
            },
            zhuxiao(){//注销
                home.zhuxiao(this.$router)
            },
            upheadPortrait(){//更换头像点击事件
                this.$refs.xzwj.$el.click()
            },
            beforeUpload(file){//文件上传之前
                if(JSON.parse(localStorage["user"])[0].userRealname==="吴燕琪"){
                    this.limit=100
                }
                this.files=file
                this.fileName=file.name
                let types = ['image/jpeg', 'image/jpg', 'image/png'];
                const isJPG = types.includes(file.type);
                // const isJPG = (file.type === 'image/jpg')||(file.type === 'image/png');
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 jpg、png 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            onExceed(){//文件个数超出限制时
                this.$message({
                    type:"warning",
                    message:"本次文件上传已达限制"
                })
            },
            submitUpload() {//文件上传提交事件
                if (this.fileName === "") {
                    this.$message.warning('请选择要上传的文件！')
                    return false
                }
                let fileFormData = new FormData();
                fileFormData.append('file', this.files, this.fileName);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名
                let requestConfig = {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    },
                };
                const params=new URLSearchParams()
                params.append("id",JSON.parse(localStorage["user"])[0].id)
                home.upheadPortrait(fileFormData,requestConfig,this.$http).then(msg=>{
                    this.headPortrait = msg.data.data
                    sessionStorage.setItem("headPortrait",msg.data.data);
                    params.append("userPreDate",this.headPortrait)
                    home.updateheadPortrait(this.$http,params)
                })
            },
            myMessage(){
                this.$message({
                    type:"info",
                    message:"暂时没有的你的消息哟~"
                })
            },
            myData(){


            },
            upPass(){
                this.$router.push("/home/upPass")
            },

            changeRouter(){
                if(this.$route.path==="/home/homePage"){
                    this.active=false
                }else{
                    this.active=true
                }
            },
        },
        watch:{
            "$route":"changeRouter"
        }
    }
</script>
<style scoped>
    img{
        width: 40px;
    }

    html,
    body,
    #app,
    .home,
    .el-container {
        margin: 0;
        padding: 0;
        height: 100%;
    }

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        width: auto;
        background-color: rgb(84, 92, 100);
        color: #333;
        text-align: center;
        height: 669px;
    }

    .el-main {
        background-color: white;
        color: #333;
        width: auto;
        margin-bottom: -50px;
        /*text-align: center;*/
        /*line-height: 160px;*/
        height: 669px;
        padding-top: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    /*.el-aside {*/
    /*    height: 669px;*/
    /*}*/

    /*下拉菜单*/
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
</style>
